<!--
 * @Author: Wangtao
 * @Date: 2020-11-16 15:10:23
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-04-24 11:05:18
-->
<template>
  <div
    class="type-component"
    style="flex: 0 0 180px"
    v-show="condition !== 'empty' && condition !== 'nempty'"
  >
    <template v-if="(returntype === 'number') && (type === 'number')">
      <el-input
        size="mini"
        v-model.number="value1"
        @input="inputChange"
        :type="type | getInputType"
        placeholder="请输入"
      ></el-input>
      <el-input
        size="mini"
        v-model.number="value2"
        @input="inputChange"
        :type="type | getInputType"
        placeholder="请输入"
        v-if="condition === 'between' || condition === 'nbtn'"
      ></el-input>
    </template>
    <template v-if="(returntype !== 'number') && (type === 'number')">
      <el-input
        size="mini"
        v-model="value1"
        @input="inputChange"
        :type="type | getInputType"
        placeholder="请输入"
      ></el-input>
      <el-input
        size="mini"
        v-model="value2"
        @input="inputChange"
        :type="type | getInputType"
        placeholder="请输入"
        v-if="condition === 'between' || condition === 'nbtn'"
      ></el-input>
    </template>
    <template v-if="type === 'string'">
      <el-input
        size="mini"
        v-model="value1"
        @input="inputChange"
        :type="type | getInputType"
        placeholder="请输入"
      ></el-input>
      <el-input
        size="mini"
        v-model="value2"
        @input="inputChange"
        :type="type | getInputType"
        placeholder="请输入"
        v-if="condition === 'between' || condition === 'nbtn'"
      ></el-input>
    </template>
    <template v-if="type === 'date'">
      <el-date-picker
        v-model="value1"
        :type="condition | getDateType"
        @input="inputChange"
        size="mini"
        value-format='yyyy-MM-dd HH:mm:ss'
        placeholder="选择日期时间"
        @focus="onFocus"
        @blur="onBlur"
      >
      </el-date-picker>
      <el-date-picker
        v-model="value2"
        :type="condition | getDateType"
        @input="inputChange"
        @focus="onFocus"
        @blur="onBlur"
        size="mini"
        value-format='yyyy-MM-dd HH:mm:ss'
        placeholder="选择日期时间"
        v-if="condition === 'between' || condition === 'nbtn'"
      >
      </el-date-picker>
    </template>
    <template v-if="type === 'select'">
      <el-select
        size="small"
        v-model="value1"
        :placeholder="'请选择'"
        filterable
        :allow-create="props.allowCreate ? props.allowCreate : false"
        :default-first-option="props.allowCreate ? props.allowCreate : false"
        :multiple="condition | getMultipleType"
        :collapse-tags="false"
        :remote="true"
        @input="inputChange"
      >
        <el-option v-for="(item, index) in selectList" :key="index" :label="item[props.label]" :value="item[props.value]">
        </el-option>
      </el-select>
    </template>
    <template v-if="type === 'cascader'">
      <el-cascader
        v-model='value1'
        :options="selectList"
        :props="{
          checkStrictly: true,
          multiple: props.multiple ? props.multiple : false,
          children: props.children ? props.children : 'options',
          emitPath: props.emitPath ? false : true,
          label: props.label ? props.label : 'name',
          value: props.value ? props.value : 'name' }"
        clearable
        filterable
        collapse-tags
        @input="inputChange"
      ></el-cascader>
    </template>
    <template v-if="!type">
      <el-input disabled size="mini" placeholder="请输入"></el-input>
    </template>
  </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/common'
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
@Component({
  name: 'custom-search',
  filters: {
    getInputType (type) {
      if (type === 'number') {
        return 'number'
      } else {
        return 'text'
      }
    },
    getDateType (con) {
      if (con === 'eq') {
        return 'date'
      } else if (con === 'ne') {
        return 'date'
      } else {
        return 'datetime'
      }
    },
    getMultipleType (con) {
      if (con === 'in' || con === 'nin') {
        return true
      } else {
        return false
      }
    }
  },
  components: {
  }
})
export default class CustomSearch extends Vue {
  @Prop({ default: '' }) private type!: any
  @Prop({ default: '' }) private condition!: any
  @Prop({ default: [] }) private value!: any
  @Prop({ default: { label: 'name', value: '_id' } }) private props!: any
  @Prop({ default: 'string' }) private returntype!: any
  @Prop() private selectList!: any
  private $message: any
  private value1: any = ''
  private value2 = ''

  // 解决日期插件消失
  public isFocus: any = false

  private inputChange () {
    if (this.props.allowCreate && this.props.allowCreateLength) {
      if (this.value1.length > this.props.allowCreateLength) {
        this.$message.error(`最多允许创建${this.props.allowCreateLength}条`)
        this.value1.pop()
        return
      }
    }
    this.$emit('input', [this.value1, this.value2])
  }

  private cascaderMultiple = false
  @Watch('condition')
  private conditionChange (con) {
    if (['in', 'nin'].includes(con)) {
      this.cascaderMultiple = true
    } else {
      this.cascaderMultiple = false
    }
  }

  private onFocus () {
    this.isFocus = true
  }

  private onBlur () {
    this.isFocus = false
  }

  @Watch('value', { immediate: true, deep: true })
  private valueChange (newValue) {
    if (!newValue || newValue.length === 0) {
      if (this.type === 'select' && (this.condition === 'in' || this.condition === 'nin')) {
        this.value1 = []
      } else {
        this.value1 = ''
        this.value2 = ''
      }
    } else {
      newValue.forEach((item, index) => {
        const key = 'value' + (index + 1)
        this[key] = item
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.common-contition-list
  display flex
  align-items center
.common-name
  display flex
  align-items center
  .label
    display block
    white-space nowrap
.custom-list
  width 100%
  border-bottom 1px solid #ECF0F3
  font-size 14px
  color $fc-gray3
  .custom-con
    padding 15px 16px 15px
  .custom-title
    padding 3px 16px 15px
    font-size 14px
    font-weight 600
    color $fc-gray2
    display flex
    justify-content space-between
    border-bottom 1px solid #ECF0F3
    .oprate-btn
      .V7_iconfont
        font-size 12px
        color #008BEE
        cursor pointer
.custom-box
  width 100%
  font-size 14px
  color $fc-gray3
  .add-btn
    color #008BEE
    cursor pointer
    .V7_iconfont
      font-size 12px
  .custom-con
    padding 15px 16px 15px
    .oprate-btn
      .V7_iconfont
        font-size 12px
        color #008BEE
        cursor pointer
.custom-search
  .V7_iconfont
    font-size 12px
</style>
<style lang='stylus'>
.custom-box
  .el-dropdown-menu
    padding 0
.type-component
  .el-date-editor.el-input, .el-date-editor.el-input__inner
    width 180px
</style>
